<html>
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app1">
    {{title}}
    <button type="button" @click="changeTitle">change title</button>
    <button type="button" @click="destroy">destroy</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
    new Vue({
        el:"#app1",
        data:{
            title:"this is title"
        },
        methods:{
            changeTitle:function(){
                this.title= "new title";
            },
            destroy:function(){
                this.$destroy();
            }
        },
        beforeCreate(){
            console.log("beforeCreate")
        },
        created(){
            console.log("created")
        },
        beforeMount(){
            console.log("beforeMount")
        },
        mounted(){
            console.log("mounted")
        },
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },
        beforeDestroy(){
            console.log("beforeDestory")
        },
        destroyed(){
            console.log("destory")
        }
    })
</script>
</html>